import React from "react";

interface Item {
  name: string;
  value: number;
  url: string;
}

interface MylistProps {
  data: Item[];
}

const Mylist: React.FC<MylistProps> = ({ data }) => {
  const handleClick = (url: string) => {
    if (url) {
      window.open(url, "_blank", "noopener,noreferrer");
    }
  };

  return (
    <div className="border-t-2 border-[#f6f6f6]">
      {data.map((item, index) => (
        <div
          key={index}
          className="flex text-4 leading-none items-center justify-between p-1.5 rounded-md hover:bg-[#f2faff] cursor-pointer"
        >
          <div className="flex items-center ">
            <span className="w-2 h-2 bg-[#25e9c2] rounded-full mr-5"></span>
            {item.name}
          </div>
          <div
            onClick={() => handleClick(item.url)}
            className="w-17 h-[22px] bg-[#236BFF] rounded-13 flex items-center justify-center text-white"
          >
            {item.value}
          </div>
        </div>
      ))}
    </div>
  );
};

export default Mylist;
